<template>
  <view class="supervision">
    <view class="search">
      <u-search
        v-model="searchValue"
        placeholder="搜索"
        shape="square"
        bg-color="#EDEDEE"
        clearabled
        :show-action="false"
        @change="search"
      />
    </view>

    <view class="content">
      <top-data
        :title="townTitle"
        :list="townInfo"
      />
      <list
        ref="list"
        :title="listTitle"
        :list="list"
        :params="listParams"
        :bottom-tips="bottomTips"
        @refresh="refresh"
        @loadMore="loadMore"
      />
    </view>
    <view class="loading">
      <u-mask :show="loading">
        <u-loading size="100" mode="flower" :show="loading" />
      </u-mask>
    </view>
  </view>
</template>

<script>
import { debounce } from '@/utils/debounce';
import { queryBodyByProduce } from '@/api/formview';
import { Message } from '@/utils/utils';
import List from '@/pages/analysis/components/List.vue';
import TopData from '@/pages/analysis/components/TopData.vue';
export default {
  name: 'Supervision',
  components: {
    List,
    TopData
  },
  data() {
    return {
      title: '',
      searchValue: '',
      loading: false,
      tableId: undefined,
      page: {
        pageIndex: 0,
        pageSize: 50,
        pageType: 1,
        resultAsTree: false
      },
      list: [],
      townInfo: [],
      townTitle: '',
      total: 0,
      filterList: [],
      listTitle: '项目列表',
      bottomTips: '',
      listParams: {
        // 进度条字段(得带有百分号)
        progress: 'ZXL',
        title: 'CPROGRAMNAME'
      }
    };
  },
  created() {
    this.getTitle();
    this.search = debounce(this.search, 500);
    this.search();
  },
  methods: {
    getTitle() {
      const { title, CENTERPRISECODE1 } = this.$route.query;
      this.title = title;
      if (title === '项目分析') {
        this.tableId = 475;
      } else if (title === '资金监管') {
        this.tableId = 554;
      }
      this.filterList = [
        { col: 'CENTERPRISECODE1', value: CENTERPRISECODE1 }
      ];
    },
    search() {
      this.page.pageIndex = 0;
      this.getList();
    },
    async getList() {
      this.loading = true;
      const obj = {
        ...this.page,
        tableId: this.tableId,
        filterList: [...this.filterList, { col: 'CPROGRAMNAME', value: this.searchValue }]
      };
      const { data, success, message, total } = await queryBodyByProduce(obj);
      if (success && data) {
        // this.page.pageIndex ? this.list = this.list.concat(data) : this.list = data;
        // 加载更多
        if (this.page.pageIndex) {
          this.list = this.list.concat(data);
        } else {
          // 是否为搜索
          if (this.searchValue) {
            this.list = data;
          } else {
            const townInfo = data.shift();
            this.townInfo = [
              { name: '总预算数', num: townInfo.YSS },
              { name: '总支付数', num: townInfo.ZCS },
              { name: '执行率', num: townInfo.ZXL }
            ];
            this.townTitle = townInfo.CPROGRAMNAME;
            this.list = data;
          }
        }
        this.total = total;
      } else {
        this.list = [];
        this.total = 0;
        Message(message);
      }
      this.loading = false;
    },
    // 下拉刷新
    async refresh() {
      this.page.pageIndex = 0;
      await this.getList();
      this.$refs.list.$refs.hrPullLoad.reSet();
    },
    // 上拉加载
    async loadMore() {
      if (((this.page.pageIndex + 1) * this.page.pageSize) >= this.total) {
        this.bottomTips = 'nomore';
      } else {
        this.bottomTips = 'loading';
        this.page.pageIndex++;
        await this.getList();
        this.bottomTips = '';
      }
    }
  }
};
</script>

<style lang="less" scoped>
.supervision{
  height: 100vh;
  width: 100vw;
  .search {
    width: 100%;
    height: 52px;
    padding: 8px 16px;
  }
  .content{
    background-color: #1492FF;
    height: calc(100% - 52px);
    .top_data{
      height: 115px;
    }
    .list{
      height: calc(100% - 115px);
    }
  }
  .u-loading{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
  }
}
</style>
